<!-- orderDetails:订单列表详情 -->
<template>
    <div class="orderDetails">
        <el-page-header class="header" @back="goBack" content="订单详情" style="font-size: 18px;"> </el-page-header>
        <div class="conter">
            <p class="title">基本信息</p>
            <div class="basic">
                <div class="">
                    <div class="colorStyle">
                        <div class="test">主订单号：</div>
                        <div class="cont">{{ datalist.orderId }}</div>
                    </div>
                    <div class="colorStyle">
                        <div class="test">子订单号：</div>
                        <div class="cont">--</div>
                    </div>

<!--                    <div class="">-->
<!--                        <div class="test">清关方式：</div>-->
<!--                        <div class="cont">&#45;&#45;</div>-->
<!--                    </div>-->

                    <div class="">
                        <div class="test">用户备注：</div>
                        <div class="cont">{{ datalist.remarks }}</div>
                    </div>
                    <div class="">
                        <div class="test">所属平台：</div>
                        <div class="cont">{{ datalist.plat }}</div>
                    </div>
                    <div class="colorStyle">
                        <div class="test">所属店铺：</div>
                        <div class="cont">{{ datalist.shop }}</div>
                    </div>
                    <div class="">
                        <div class="test">物流方式：</div>
                        <div class="cont">快递邮件</div>
                    </div>
                    <div class="">
                        <div class="test">优惠：</div>
                        <div class="cont">¥ {{ datalist.prePrice }}</div>
                    </div>

                </div>
                <div class="">
                    <div class="colorStyle">
                        <div class="test">订单数量：</div>
                        <div class="cont">{{ datalist.goodsNum }}</div>
                    </div>
                    <div class="colorStyle">
                        <div class="test">支付金额：</div>
                        <div class="cont">￥{{ datalist.payPrice }}</div>
                    </div>
                    <div class="colorStyle">
                        <div class="test">商品总金额：</div>
                        <div class="cont">￥{{ datalist.stockTotalPrice - datalist.shippingFee - datalist.taxesFee }}</div>
                    </div>
                    <div class="colorStyle">
                        <div class="test">结算金额：</div>
                        <div class="cont">￥{{ datalist.stockTotalPrice }}</div>
                    </div>
                    <div class="">
                        <div class="test">付款类型：</div>
                        <div class="cont">--</div>
                    </div>
                    <div class="">
                        <div class="test">运费：</div>
                        <div class="cont">¥ {{ datalist.shippingFee }}</div>
                    </div>





<!--                    <div class="">-->
<!--                        <div class="test">支付流水号：</div>-->
<!--                        <div class="cont">2020.4.18 10:59:130</div>-->
<!--                    </div>-->
                </div>
                <div class="">
                    <div class="colorStyle">
                        <div class="test">订单状态：</div>
                        <div class="cont">{{ datalist.status == 0 ? "待支付" : (datalist.status == 1 ? "待确认" : (datalist.status == 2 ? "待发货" : (
                            datalist.status == 3 ? "缺货" : (datalist.status == 4 ? "已发货" : (datalist.status == 5 ? "已签收" : (datalist.status == 6 ? "已完成" : (datalist.status == 7 ? "已退款" : "未知"))))))) }}</div>
                    </div>
<!--                    <div class="">-->
<!--                        <div class="test">退货状态：</div>-->
<!--                        <div class="cont">&#45;&#45;</div>-->
<!--                    </div>-->
<!--                    <div class="">-->
<!--                        <div class="test">异常类型：</div>-->
<!--                        <div class="cont">&#45;&#45;</div>-->
<!--                    </div>-->
<!--                    <div class="">-->
<!--                        <div class="test">订单来源：</div>-->
<!--                        <div class="cont">¥ 99.0</div>-->
<!--                    </div>-->
                    <div class="">
                        <div class="test">创建方式：</div>
                        <div class="cont">{{ datalist.type == 1 ? "接口" : "Excel导入" }}</div>
                    </div>
                    <div class="colorStyle">
                        <div class="test">下单时间：</div>
                        <div class="cont">{{ datalist.orderTime }}</div>
                    </div>
                    <div class="">
                        <div class="test">支付时间：</div>
                        <div class="cont">{{ datalist.payTime }}</div>
                    </div>
                    <div class="">
                        <div class="test">创建时间：</div>
                        <div class="cont">{{ datalist.createdTime }}</div>
                    </div>
                    <div class="">
                        <div class="test">税费：</div>
                        <div class="cont">¥ {{ datalist.taxesFee }}</div>
                    </div>
<!--                    <div class="">-->
<!--                        <div class="test">渠道类型：</div>-->
<!--                        <div class="cont">快递</div>-->
<!--                    </div>-->
<!--                    <div class="colorStyle">-->
<!--                        <div class="test">签收时间：</div>-->
<!--                        <div class="cont">2020.4.18 10:59:130</div>-->
<!--                    </div>-->
                </div>
            </div>

            <p class="title">收件人信息</p>
            <div class="address">
                <div class="colorStyle">
                    <div class="">
                        <div class="test">收货人手机：</div>
                        <div class="cont">{{ datalist.contactWay }}</div>
                    </div>
                    <!-- <div class="">
                        <div class="test">收件人：</div>
                        <div class="cont">{{ datalist.plat }}</div>
                    </div> -->
<!--                    <div class="" style="width:400px">-->
<!--                        <div class="test">身份证图片：</div>-->
<!--                        <img :src="item.img" v-for="(item, index) in imgs" :key="index" alt="" />-->
<!--                    </div>-->
                    <div class="">
                        <div class="test" style="width: 140px;">收货人身份证信息：</div>
                        <div class="cont">{{ datalist.recipientsIdcard }}</div>
                    </div>
                </div>
                <div class="colorStyle">
                    <div class="">
                        <div class="test">收货人姓名：</div>
                        <div class="cont">{{ datalist.recipientsName }}</div>
                    </div>
                </div>
                <div class="colorStyle">
                    <div class="">
                        <div class="test">收货地址：</div>
                        <div class="cont">{{ datalist.province }}{{ datalist.city }}{{ datalist.county }}{{ datalist.streetDetail }}</div>
                    </div>
                </div>
            </div>
            <p class="title" style="margin:40px 0 20px 10px">商品信息</p>
            <el-table :data="datalist.goodsDeail" class="table" height="250" border min-width="400">
                <el-table-column label="商品信息" width="300">
                    <template slot-scope="scope">
                        <!-- v-for="(item, index) in items" :key="index" -->
                        <div class="tableCont">
                            <img :src="scope.row.info.mainImgUrl" alt="" />
                            <div class="titles">
                                {{ scope.row.info.goodsName }}
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="info.spec" label="规格"> </el-table-column>
                <el-table-column prop="info.brandName" label="品牌"> </el-table-column>
                <el-table-column prop="info.areaRaw" label="产地"> </el-table-column>
                <el-table-column prop="info.materialRaw" label="材质"> </el-table-column>
                <el-table-column prop="info.goodsNo" label="SPU编码"> </el-table-column>
                <el-table-column prop="info.skuNo" label="SKU编码"> </el-table-column>
                <el-table-column prop="goods.goodsNum" label="数量"> </el-table-column>
                <el-table-column prop="goods.stockPrice" label="采购价"> </el-table-column>
<!--                <el-table-column prop="goods.payPrice" label="销售价"> </el-table-column>-->
                <!-- <el-table-column prop="address" label="贸易方式">
                </el-table-column> -->
                <el-table-column prop="" :formatter="sumstock" label="采购小计"></el-table-column>
                <el-table-column prop="goods.payPrice" label="销售小计"> </el-table-column>
            </el-table>
            <p class="title" style="margin-top:40px">
                子订单信息
            </p>
            <el-table :data="datalist.wuliuInfo.content" border style="width: 800px;margin:20px 0 150px 10px">
                <el-table-column prop="subOrderSn" label="子订单编号" width="180"> </el-table-column>
                <el-table-column prop="goodsNum" label="商品数量" width="180"> </el-table-column>
                <el-table-column prop="shippingVoList[0].expressName" label="物流公司" width="180"> </el-table-column>
                <el-table-column prop="shippingVoList[0].shippingSn" label="物流单号"> </el-table-column>
            </el-table>
        </div>
    </div>
</template>
<script>
import { listOrder, getOrder, delOrder, addOrder, updateOrder, exportOrder } from '@/api/biz/order';

export default {
    name: 'orderDetails',
    props: ['datalist'],
    data() {
        return {
            baseimg: require('../../assets/image/ewm.jpg'),
            imgs: [
                // {
                //     img: require('../../assets/image/ewm.jpg')
                // },
                // {
                //     img: require('../../assets/image/ewm.jpg')
                // }
            ],
            //tableData: datalist.wuliuInfo.content
        };
    },
    created() {},
    methods: {
        // 返回列表
        goBack() {
            this.$emit('toRetreat');
        },
        sumstock(row) {
            return row.goods.stockPrice * row.goods.goodsNum;
        }
    }
};
</script>
<style rel="stylesheet/scss" lang="scss">
.orderDetails {
    width: 100%;
    height: 100%;
    background: #ffffff;
    position: absolute;
    z-index: 99;
    top: 0;
    .header {
        margin: 20px;
    }
    .conter {
        height: 800px;
        overflow: auto;
        overflow-x: hidden;
    }
    .title {
        width: 100%;
        background: #ededed;
        padding: 10px;
        font-size: 14px;
        margin-left: 10px;
    }
    .basic,
    .address {
        display: flex;
        > div {
            flex: 1;
            > div {
                overflow: hidden;
            }
        }
        div {
            font-size: 14px;
            line-height: 24px;
            img {
                width: 120px;
                height: 75px;
                float: left;
            }
            img:nth-child(3) {
                margin-left: 20px;
            }
        }
    }
    .table {
        width: 98%;
        margin: 0 10px;
    }
    // 公共
    .test,
    .cont {
        float: left;
    }
    .test {
        width: 100px;
        text-align: right;
    }
    .el-page-header__title {
        font-size: 18px;
    }
}
</style>
